<template>
  <div class="param-info" ref="rule">
    <!-- 尺码 -->
    <table class="info-size">
      <tr v-for="(i, index) in props.rule1" :key="i">
        <td v-for="item in props.rule1[index]" :key="item">{{ item == '0' ? '-': item }}</td>
      </tr>
    </table>
    <table>
      <tr v-for="(i, index) in props.rule2!==undefined " :key="index">
        <td v-for="item in props.rule2[index]" :key="item">{{ item }}</td>
      </tr>
    </table>
    <table>
      <tr v-for="(item, index) in props.info" :key="index">
        <td class="nowarp">{{item.key}}</td>
        <td style="color:#FF6699;text-align:center">{{item.value}}</td>
      </tr>
    </table>
  </div>
</template>

<script setup="props">
import { defineProps, onMounted, ref,getCurrentInstance } from "vue";
const ctx = getCurrentInstance()
const props = defineProps({
  rule1: {
    type: Array,
    default: () => [],
  },
  rule2: {
    type: Array,
    default: () => [],
  },
  info: {
    type: Array,
    default: () => [],
  },
});
const rule = ref()
onMounted(() => {
  ctx.emit('rule',rule.value)
})
</script>

<style scoped lang="scss">
table {
  width: 100%;
  border-collapse: collapse;
  tr {
    height: 42px;
    td {
      border-bottom: 1px solid rgba(100, 100, 100, 0.1);
    }
  }
}
.nowarp{
  white-space: nowrap;
}
.param-info {
  padding: 20px 15px;
  font-size: 14px;
  color: #666;
  border-bottom: 5px solid #f2f5f8;
}
</style>